<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
  integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<link rel="stylesheet" href="./reset.css">



<!-- 放大镜 -->
<style type="text/css">
  .top {
    /* 缩略图	缩小3倍
				宽高之比:1.6
				缩略图是小放大镜的两倍 */
    /* width: 640px;
      height: 400px; */
    width: 282.5px;
    height: 282.5px;
    border: 1px solid;
    position: relative;

  }

  .top img {
    width: 100%;
    height: 100%;
  }

  /* 小放大镜 */
  .mark {
    width: 141.25px;
    height: 141.25px;
    background-color: #444;
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .bottom img {
    /* 原图 */
    width: 565px;
    height: 565px;
    position: absolute;
    left: 0;
    top: 0;

  }

  /* 大放大镜 */
  .bottom {
    z-index: 999;
    width: 282.5px;
    height: 282.5px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    display: none;
  }
</style>

<!-- 覆盖css -->
<style>
  .list-group {
    padding-left: 0;
    margin-bottom: 0px;
  }
</style>

<body>
  <div>



    <div class="box" style="background-color: #eeeeee; height: 4000px;">


      <div style="margin: 0 auto;">

        <div class="panel panel-default">
          <div class="panel-body">

            <div style="display:flex ; position: relative; ">
              <!-- 放大镜 -->
              <div style="margin-right: 20px;">
                <div>
                  <div class="app" style="display:flex;">
                    <div class="top">
                      <!-- 缩略图 -->
                      <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
                      <!-- 小放大镜 -->
                      <div class="mark" style="z-index:20 ;"></div>
                    </div>
                    <!-- 大放大镜 -->
                    <div class="bottom">
                      <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
                    </div>

                    <div class="brand" style="position:absolute; left:20px;top:10px"><img
                        src="https://www.jotrin.com/userfiles/images/ic-mfg/FAIRCHILD.jpg" alt="">
                    </div>

                  </div>
                </div>
                <div class="smallImg-txt" style="width: 300px;
                margin-top: 5px;
                padding-left: 2px;
                white-space: nowrap;
                overflow: hidden;
                margin-bottom: 20px;
                color: #999;">图片仅供参考，请参阅产品规格。</div>

              </div>
              <!-- 表格 -->
              <div style="margin-right:40px ; position: absolute; left: 400px;">
                <div class="title" style="display: flex;
                position: relative;
                ">
                  <h1 style="    font-size: 16px;
                  font-weight: 700;">DNP015NA</h1>
                  <img style="width: 20px;
                  position: absolute;
                  top: -6px;
                  left: 100px;
                  height: 10px;" src="https://file.jotrin.com/Themes/StyleJotrin/Images/icon/hot5.gif" alt="">
                  <a href="" style="    width: 20px;
                  height: 20px;
                  display: block;
                  position: absolute;
                  right: 0px;
                  top: 0px;">
                    <span class="glyphicon glyphicon-star"></span>
                  </a>
                </div>
                <p style="text-align:left ;">集成电路(IC) DIP8</p>
                <ul class="list-group row" style="overflow: hidden;">
                  <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ; ">制造商 : </li>
                  <li class="list-group-item col-md-8" style="float: right; white-space: nowrap;">Fairchild
                    Semiconductor (ON Semiconductor)
                  </li>
                </ul>
                <ul class="list-group  row" style="overflow: hidden;">
                  <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">封装/规格 : </li>
                  <li class="list-group-item col-md-8" style="float: right;">DIP8
                  </li>
                </ul>
                <ul class="list-group  row" style="overflow: hidden;">
                  <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">产品分类 : </li>
                  <li class="list-group-item col-md-8" style="float: right;">集成电路(IC)
                  </li>
                </ul>
                <ul class="list-group  row" style="overflow: hidden;">
                  <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">Datasheet: </li>
                  <li class="list-group-item col-md-8" style="float: right;">DNP015NA Datasheet (PDF)
                  </li>
                </ul>

                <ul class="list-group  row" style="overflow: hidden;">
                  <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">RoHs Status: </li>
                  <li class="list-group-item col-md-8" style="float: right;">Lead free/RoHS Compliant
                  </li>
                </ul>


                <div>
                  <span style="
                  font-weight: 700;
              ">数量</span>
                  &nbsp;&nbsp;

                  <input type="number" style="height: 40px;">
                  &nbsp;&nbsp;

                  <button type="button" class="btn btn-danger">询价</button>
                </div>


              </div>
              <!-- 表单 -->
              <div style="border: 1px solid #b3d9e6;position: absolute; left: 800px; top: -15px; 
              border-radius: 3px;
              background: #fff;">

                <div>


                  <div class="head" style="    background-color: #b3d9e6;
                  color: #fff;
                  border-top-right-radius: 3px;
                  border-top-left-radius: 3px;
                  padding-left: 20px;
                  padding-top: 10px;
                  padding-bottom: 10px;">
                    <p style="margin: 0px;
                    font-weight: 700;
                    text-align: left;
                    ">在线询价</p>
                  </div>
                  <form>
                    <p style="    padding: 0 15px;
                    margin: 10px 0;
                    font-size: 10px;">温馨提示: 请填写以下信息，以便客户代表及时与您沟通库存数量和价格回复结果。</p>


                    <ul>
                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        left: 7px;
                        top: 10px;
                        position: absolute;"></i>
                        <input type="number" placeholder="选购数量" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                    
                    
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>
                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        background-position: 0px -47px;
                        left: 7px;
                        top: 10px;
                        position: absolute;
                        
                        
                        "></i>
                        <input type="text" placeholder="联系人" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>
                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        background-position: 0px -94px;
                        left: 7px;
                        top: 10px;
                        position: absolute;
                        "></i>
                        <input type="text" placeholder="邮箱" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>

                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        background-position: 0px -138px;
                        left: 7px;
                        top: 10px;
                        position: absolute;
                        "></i>
                        <input type="text" placeholder="电话" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>

                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        background-position: 0px -184px;
                        left: 7px;
                        top: 10px;
                        position: absolute;
                        "></i>
                        <input type="text" placeholder="公司" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>


                      <li style="margin: 0 15px;
                      position: relative;">
                        <i style="width: 16px;
                        height: 16px;
                        background: url(./image/details_icon.png) no-repeat;
                        background-position: 0px -232px;
                        left: 7px;
                        top: 10px;
                        position: absolute;
                        "></i>
                        <input type="textarea" placeholder="内容" style="text-indent: 10px;
                        line-height: 30px;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ccc;
                        height: 36px;
                        padding-left: 35px;
                        box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        width: 100%;
                    
                    
                    
                    font-family: inherit;
                        font-size: inherit;
                        font-weight: inherit;
                        outline: 0;
                        border-radius: 0;">
                      </li>

                      <li style="padding: 20px;">
                        <button aria-hidden="true" type="button" class="glyphicon glyphicon-envelope  btn btn-info">
                          发送询价
                        </button>
                      </li>

                    </ul>



                  </form>
                </div>



              </div>
            </div>



          </div>
        </div>




        <div style="border: 1px solid #b3d9e6;
        border-radius: 3px;
        background: #fff;">
          <div>
            <div class="head" style="    background-color: #b3d9e6;
                color: #fff;
                border-top-right-radius: 3px;
                border-top-left-radius: 3px;
                padding-left: 20px;
                padding-top: 10px;
                padding-bottom: 10px;">
              <p style="margin: 0px;
                  font-weight: 700;
                  text-align: left;
                  ">在线询价</p>
            </div>
            <div class="content" style="padding: 10px;">
              <p style="    text-align: start;
              display: block;
              margin-block-start: 1em;
              margin-block-end: 1em;
              margin-inline-start: 0px;
              margin-inline-end: 0px;
              overflow-wrap: break-word;">The FAN7930B is an active power factor correction (PFC) controller for
                boost PFC applications that
                operate in critical conduction mode (CRM). It uses a voltage-mode PWM that compares an internal ramp
                signal with the error amplifier output to generate a MOSFET turn-off signal. Because the voltage-mode
                CRM PFC controller does not need rectified AC line voltage information, it saves the power loss of an
                input voltage sensing network necessary for a current-mode CRM PFC controller.</p>
              <p style="text-align: start;">Applications �� Adapter �� Ballast �� LCD TV, CRT TV �� SMPS</p>
              <p style="text-align: center;">
                <img src="https://www.jotrin.com/productFiles/b/201603/FAN7930B-53327.jpg" alt="">
              </p>
              <h3 style="margin: 10px 0;
              text-align: left;
              ">特性</h3>
              <p style="text-align: start;">�� Additional OVP Detection Pin �� Input Voltage Absent Detection Circuit
                �� Maximum Switching
                Frequency Limitation �� Internal Soft-Start and Overshoot-less Control �� Internal Total Harmonic
                Distortion (THD) Optimizer �� Precise Adjustable Output Over-Voltage Protection �� Open-Feedback
                Protection and Disable Function �� Zero Current Detector �� 150μs Internal Startup Timer �� MOSFET
                Over-Current Protection �� Under-Voltage Lockout with 3.5V Hysteresis �� Low Startup and Operating
                Current �� Totem-Pole Output with High State Clamp �� +500/-800mA Peak Gate Drive Current �� 8-Pin
                Small Outline Package (SOP)</p>
            </div>
          </div>
        </div>



      </div>

    </div>



  </div>
</body>
<script src="./js/jquery-3.6.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<!-- 放大镜 -->
<script type="text/javascript">
  /* 放大镜原理:
    原图宽高比例=缩略图宽高比例=放大镜宽高比例
    原图与大放大镜倍数比例=缩略图与小放大镜倍数比例
    小放大镜移动方式与原图移动方向相反,原图移动距离=-小放大镜移动距离*倍数 */
  //获取top节点
  var _top = document.querySelector(".top");
  // 获取小放大镜节点
  var _mark = document.querySelector(".mark");
  //获取原图节点
  var _rimg = document.querySelector(".bottom img");
  //获取bottom节点
  var _bottom = document.querySelector(".bottom");

  //鼠标悬停显示放大镜和原图
  _top.onmouseover = function () {
    _mark.style.display = "block";
    _bottom.style.display = "block";
  }
  // 鼠标离开时隐藏放大镜和原图
  _top.onmouseout = function () {
    _mark.style.display = "none";
    _bottom.style.display = "none";
  }

  // onmousemove:鼠标跟随事件
  _top.onmousemove = function (event) {

    //1.计算小放大镜的移动位置	//clientX	clientY：获取鼠标点距离浏览器的坐标
    //offsetLeft：距离左偏移量	clientWidth：可视宽
    var dx = event.clientX - _top.offsetLeft - _mark.clientWidth / 2;
    var dy = event.clientY - _top.offsetTop - _mark.clientHeight / 2;

    //到最左边
    if (dx <= 0) {
      dx = 0;
    }
    //到最右边
    if (dx >= _top.clientWidth - _mark.offsetWidth) {
      dx = _top.clientWidth - _mark.offsetWidth;
    }

    //小放大镜的左、上距离
    _mark.style.left = dx + "px";

    //到最上边
    if (dy <= 0) {
      dy = 0;
    }
    //到最下边
    if (dy >= _top.clientHeight - _mark.offsetHeight) {
      dy = _top.clientHeight - _mark.offsetHeight;
    }
    _mark.style.top = dy + "px";
    //2.根据小放大镜的移动位置改变原图位置		原图是缩略图的3倍
    _rimg.style.left = -3 * dx + "px";
    _rimg.style.top = -3 * dy + "px";
  }
</script>

</html>